<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>ajax案例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
    <style>
      * {
        margin: 0;
        padding: 0;
      }
      .cates {
        width: 347px;
        height: 158px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
      }
      .cates > div {
        width: 20%;
        height: calc(158px / 2);
        display: flex;
        flex-direction: column; /*将垂直轴作为主轴*/
        justify-content: center;
      }
      .cates > div > img {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        margin: 0 auto;
      }
      .cates > div > p {
        text-align: center;
        margin-top: 3px;
        font-size: 12px;
      }
      .coupons {
        display: flex;
        align-items: center;
        height: 100px;
        width: 347px;
        margin: 0 auto;
        overflow-x: scroll;
      }
      .coupons::-webkit-scrollbar {
        /*取消父元素滚动条*/
        display: none;
      }
      .coupons > div {
        flex-shrink: 0; /*弹性布局子元素属性：设置在子元素上，父元素开启弹性布局，当子元素内容超出父元素时，默认子元素得宽高会被挤压缩放，以保证子元素不会超出父元素宽高。如果允许子元素超出父元素宽高，不要挤压子元素大小，可以设置此属性。该属性默认值是1，0代表禁止挤压子元素大小。*/
        width: 150px;
        height: 100%;
        text-align: center;
        line-height: 100px;
      }
    </style>
  </head>
  <body>
    <div class="cates"></div>
    <div class="coupons"></div>
    <script>
      // 1. 请求分类接口数据
      fetch("https://apif.java.crmeb.net/api/front/index", {
        method: "GET",
        headers: {},
      })
        // 2. 从大对象data数据中查找menus数组
        .then((res) => res.json())
        // 3. 解构data数据
        .then(({ data }) => {
          // console.log(data.menus[0])
          // 4. 遍历数组，循环找到并拼加pic，name数据
          data.menus.forEach((item) => {
            const divItem = document.createElement("div");
            divItem.innerHTML = `<img src="${item.pic}" /><p>${item.name}</p>`;
            $(".cates").append(divItem);
          });
        });

      // 5. 请求优惠券列表接口
      // jQuery比较特殊：GET请求只能使用查询字符串携带参数，传递给服务器。
      $.ajax({
        // 两种方式url: "https://apif.java.crmeb.net/api/front/coupons?page=1&limit=6",
        url: "https://apif.java.crmeb.net/api/front/coupons",
        method: "GET",
        data: {
          // 如果是GET请求，jquery会将这个data对象的值，帮你拼接为?查询字符串。
          page: 1,
          limit: 6,
        },
        //success拿到data数据后，解构里面的data数据
        success: ({ data }) => {
          console.log(data[0]);
          // 遍历数组，循环找到并拼加
          data.forEach((item) => {
            const divItem = document.createElement("div");
            divItem.innerHTML = `<p>满${item.minPrice}元减${item.money}元</p>`;
            $(".coupons").append(divItem);
          });
        },
      });
    </script>
  </body>
</html>
